<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生选课</title>
    <style type="text/css">
        <!--
        /************ Table ************/
        .xwtable {width: 50%;border-collapse: collapse;border: 1px solid #ccc;}
        .xwtable thead td {font-size: 12px;color: #333333;text-align: center; repeat-x top center;border: 1px solid #ccc; font-weight:bold;}
        .xwtable tbody tr {background: #fff;font-size: 12px;color: #666666;}
        .xwtable tbody tr.alt-row {background: #f2f7fc;}
        .xwtable td{line-height:20px;text-align: left;padding:4px 10px 3px 10px;height: 18px;border: 1px solid #ccc;}
        -->
    </style>
    <script src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<h1>欢迎<span id="showUser"></span>登录</h1>
<h3>学生选课</h3>
<button id="selected_mgr">管理已选课程</button>
<table id="list" style="border-style: solid;border-width: 2px" class="xwtable">
</table>
<div id="page">
<script>
    $(function (){
        let pageNum = 1;
        let pageSize = 5;
        function getCookie(name) {
            var prefix = name + "="
            var start = document.cookie.indexOf(prefix)
            if (start == -1) {
                return null;
            }
            var end = document.cookie.indexOf(";", start + prefix.length)
            if (end == -1) {
                end = document.cookie.length;
            }
            var value = document.cookie.substring(start + prefix.length, end)
            return unescape(value);
        }
        var username = getCookie("username");
        $("#showUser").html(username);
        loadTable(pageNum,pageSize)
        function loadTable(pn,ps){
            $.ajax({
                type:"GET",
                url:"/course/findPage?pageNum="+pageNum+"&pageSize="+pageSize+"&courseName=",
                success: function(r){
                    $("#list").empty();
                    $("#list").append("<tr>\n" +
                        "        <th>课程号</th>\n" +
                        "        <th>课程名称</th>\n" +
                        "        <th>授课教师</th>\n" +
                        "        <th>教室容量</th>\n" +
                        "        <th>当前选课人数</th>\n" +
                        "        <th>操作</th>\n" +
                        "    </tr>")
                    $("#page").empty();
                    let courses = r.result.data.list;
                    for (let i=0; i<courses.length; i++){
                        console.log(courses[i])
                        let c = courses[i];
                        $("#list").append("<tr><td>"+c.id+"</td><td>"+c.courseName+"</td><td>"+c.teacherName+"</td>" +
                            "<td>"+c.croomCapacity+"</td><td>"+c.selectCount+"</td>" +
                            "<td><a href='javascript:;' id='selectCurr' val="+"'"+c.id+"'"+">选择这门课</a></td>"+
                            "</tr>");
                    }
                    let page = r.result.data;
                    if(page.hasPreviousPage){
                        $("#page").append("<button id='prePage' val="+"'"+page.prePage+"'"+">上一页</button>")
                    }
                    for (let i = 1; i <= page.pages ; i++) {
                        $("#page").append("<button id='gotoPage' val="+"'"+i+"'"+">"+i+"</button>")
                    }
                    if(page.hasNextPage){
                        $("#page").append("<button id='nextPage' val="+"'"+page.nextPage+"'"+">下一页</button>")
                    }
                    console.log($("#prePage").attr("val"))
                    console.log($("#nextPage").attr("val"))
                }
            });
        }
        $(document).on('click', '#prePage',function(event) {
            let prePage = $(event.target).attr("val");
            pageNum = prePage;
            loadTable(pageNum,pageSize,'')
            console.log(prePage)
        });
        $(document).on('click', '#gotoPage',function(event) {
            let toPage = $(event.target).attr("val");
            pageNum = toPage;
            loadTable(pageNum,pageSize,'')
            console.log(toPage)
        });
        $(document).on('click', '#nextPage',function(event) {
            let nextPage = $(event.target).attr("val");
            pageNum = nextPage;
            loadTable(pageNum,pageSize,'')
            console.log(nextPage)
        });
        $(document).on('click', '#selectCurr',function(event) {
            let cid = $(event.target).attr("val");
            $.ajax({
                type:"get",
                url:"/user/selectcourse?courseId="+cid,
                success: function(r){
                    alert(r.msg)
                    if(r.ok){
                        pageNum = 1;
                        pageSize = 5;
                        loadTable(pageNum,pageSize,'')
                    }else{
                        if(r.code===506){
                            window.location = "/login.html";
                        }
                    }
                }
            });
        });
        $("#selected_mgr").click(function (){
            window.location = "/student/selectedMgr.html";
        })
    })
</script>
</body>
</html>